<template>
	<view class="page-container">
		<!-- 默认地址 -->
		<view class="container-address" v-if="address">
			<view>
				<u-icon name="map" size="40rpx"></u-icon>
			</view>
			<view class="detail">
				<view>
					<text style="margin-right: 40rpx;">{{address.consignee}}</text>
					<text>{{address.phone}}</text>
				</view>
				<view class="address-detail">
					<text>{{address.province}}</text>
					<text>{{address.city}}</text>
					<text>{{address.county}}</text>
					<text>{{address.address}}</text>
				</view>
			</view>
			<view><u-icon name="arrow-right" size="40rpx"></u-icon></view>
		</view>
		<view class="container-bg-box"></view>
		<view class="isolation" style="margin-top: 0;"></view>
		<!-- 订单详情 -->
		<view class="container-order">
			<view v-for="item in orderDetail" :key="item.skuId">
				<view class="order-detail">
					<view>
						<image :src="item.skuImg" style="width: 150rpx;height: 150rpx;"></image>
					</view>
					<view style="padding: 10rpx;">
						<u--text :text="item.title"  :lines="1"></u--text>
						<u--text :text="item.skuTitle" color="gray"></u--text>
						<view class="pro_price">
							<u--text :text="item.originalPrice/100" decoration="line-through" size="25rpx" mode="price"></u--text>
							<u--text :text="item.price/100" mode="price" size="40rpx"></u--text>
							<u--text :text="'x' + item.num"></u--text>
						</view>
					</view>
				</view>
			</view>
			<view class="order-price">
				<view class="price-cell">
					<text class="">商品金额</text>
					<text>￥{{orderPrice}}</text>
				</view>
				<view class="price-cell">
					<text>折扣金额</text>
					<text style="color: red;">-￥{{discountPrice}}</text>
				</view>
				<view class="price-cell">
					<text>运费</text>
					<text>￥100</text>
				</view>
				<view class="price-cell">
					<text>备注</text>
					<u--input border="none" clearable :customStyle="{paddingLeft:'40rpx'}" placeholder="请填写备注信息" placeholderStyle="fontSize:20rpx" ></u--input>
				</view>
			</view>
		</view>
		<view class="container-submit">
			<view class="actual-price">
				<text>实付金额</text>
				<text>￥{{actualPrice}}</text>
			</view>
			<view class="btn">
				<u-button type="error" :customStyle='{height:"100%",fontSize:"30rpx"}'>提交订单</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {get, post} from '../../utils/http.js'
	import { $skuList } from '../../globaldata/index.js'
	export default{
		data(){
			return {
				address:null,
				orderDetail:[]
			}
		},
		onLoad(options) {
			console.log(options)
			// if(options.takeway === 'buy'){}
			this.orderDetail = $skuList
			console.log(this.orderDetail)
			post('address','getDefAddress').then(res=>{
				console.log(res)
				const {data,errno,errmsg} = res
				if(200 == errno){
					this.address = data
				}else{
					uni.showToast({
						title:errmsg,
						icon:'none'
					})
				}
			})
		},
		methods:{
			
		},
		computed:{
			orderPrice(){
				let total = 0
				this.orderDetail.forEach(item=>{
					total += item.originalPrice*item.num
				})
				return total/100
			},
			discountPrice(){
				let total = 0
				this.orderDetail.forEach(item=>{
					total += item.price*item.num
				})
				return (this.orderPrice - total/100).toFixed(2)
			},
			actualPrice(){
				let total = 0
				this.orderDetail.forEach(item=>{
					total += item.price*item.num
				})
				return total/100
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,.page-container{
		height: 100%;
		background-color: #f5f5f5;
	}
	// 默认地址
	.container-address{
		font-size: 30rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		.detail{
			flex: 1;
			margin: 0 30rpx;
			.address-detail{
				>text{
					margin-right: 15rpx;
				}
				font-size: 25rpx;
				color: gray;
				margin-top: 10rpx;
			}
		}
	}
	//背景盒子
	.container-bg-box{
		width: 100%;
		height: 4rpx;
		background-image: url('');
		background-position: 0;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.container-order{
		background-color: white;
		.order-detail{
			padding: 20rpx;
			display: flex;
			image{
				border-radius: 10rpx;
			}
			.pro_price{
				display: flex;
				margin-top: 10rpx;
				>view{
					flex: 0;
					padding-right: 10rpx;
				}
			}
		}
		.order-price{
			font-size: 30rpx;
			.price-cell{
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: 4rpx solid #f5f5f5;
			}
		}
	}
	.container-submit{
		font-size: 30rpx;
		background-color: white;
		width: 100%;
		display: flex;
		align-items: center;
		height: 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		.actual-price{
			flex: 2;
			padding-left: 20rpx;
			>text:first-child{
				margin-right: 10rpx;
			}
			>text:last-child{
				color: red;
			}
		}
		.btn{
			flex: 1;
			height: 100%;
		}
	}
</style>